<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>其它问题集合 | vue-next-admin</title>
    
    <meta name="generator" content="VitePress v1.6.3">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/assets/style.Brpq300p.css" as="style">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/vp-icons.css" as="style">
    
    <script type="module" src="/vue-next-admin-doc-preview/assets/app.BSorFS4w.js"></script>
    <link rel="preload" href="/vue-next-admin-doc-preview/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/theme.D_-w8-Et.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/framework.JQJLXAcz.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_otherIssues_index.md.BOPxKpRj.lean.js">
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
    <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-e6e9343e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-518ab264></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-518ab264>Skip to content</a><!--]--><!----><header class="VPNav" data-v-e6e9343e data-v-fcd341ad><div class="VPNavBar" data-v-fcd341ad data-v-109f5bed><div class="wrapper" data-v-109f5bed><div class="container" data-v-109f5bed><div class="title" data-v-109f5bed><div class="VPNavBarTitle has-sidebar" data-v-109f5bed data-v-1ce8aa9a><a class="title" href="/vue-next-admin-doc-preview/" data-v-1ce8aa9a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt data-v-3a7f1e1a><!--]--><span data-v-1ce8aa9a>vue-next-admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-109f5bed><div class="content-body" data-v-109f5bed><!--[--><!--]--><div class="VPNavBarSearch search" data-v-109f5bed><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-109f5bed data-v-1b1a6c0b><span id="main-nav-aria-label" class="visually-hidden" data-v-1b1a6c0b> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/home/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-next-admin-doc-preview/config/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>配置</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>集成后端</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zuohuaijun Admin.NET</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@熊猫 PandaGoAdmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://toscode.gitee.com/GionConnection/gopro_free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 GoPro平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/GionConnection/niupi-free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 NiuPi 平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/tiger1103/gfast/tree/os-v3/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@游子 GFast-V3</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/diygw/diygw-ui-php/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@diygw.com gw-ui-php</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-net" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-net</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-java" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-java</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@青红造了个白 buildadmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/xiaodingding/iotfast" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@Goodwell iotfast(一个开源的物联网平台)</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>演示 & 仓库</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>⛱️ 线上演示</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="http://vuenextadmin.ccfast.cc/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3.x 版本预览（vue-next-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue2.x 版本预览（vue-prev-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-next-admin-shop-preview" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3 + uni-app 商城（vue-next-admin-shop）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>💒 代码仓库</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>gitee（国内：实时更新）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>github（国外：定期更新）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>日志 & 文档</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>文档仓库</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/support/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>赞助</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/shop/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>商城</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-109f5bed data-v-c3b75e45><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-c3b75e45 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-109f5bed data-v-36a09a39 data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-bccf8a2a><span class="vpi-more-horizontal icon" data-v-bccf8a2a></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><!----><!--[--><!--[--><!----><div class="group" data-v-36a09a39><div class="item appearance" data-v-36a09a39><p class="label" data-v-36a09a39>Appearance</p><div class="appearance-action" data-v-36a09a39><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-36a09a39 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-109f5bed data-v-01e8b504><span class="container" data-v-01e8b504><span class="top" data-v-01e8b504></span><span class="middle" data-v-01e8b504></span><span class="bottom" data-v-01e8b504></span></span></button></div></div></div></div><div class="divider" data-v-109f5bed><div class="divider-line" data-v-109f5bed></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-e6e9343e data-v-19ebc9ec><div class="container" data-v-19ebc9ec><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-19ebc9ec><span class="vpi-align-left menu-icon" data-v-19ebc9ec></span><span class="menu-text" data-v-19ebc9ec>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-19ebc9ec data-v-f4d555a5><button data-v-f4d555a5>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-e6e9343e data-v-3048e0f0><div class="curtain" data-v-3048e0f0></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3048e0f0><span class="visually-hidden" id="sidebar-aria-label" data-v-3048e0f0> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>简介</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/menu/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>菜单配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>布局配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/iconfont/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>字体图标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/server/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>服务端交互</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/vuex/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>vuex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/build/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>打包预览</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>高级</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/power/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>权限管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/route/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>路由参数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/i18n/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>国际化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tagsView/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>标签页</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/directive/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible has-active" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>其它</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/charts/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>数据可视化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tool/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>工具类集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/partyPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>第三方插件使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/builtPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置插件的使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/otherIssues/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>其它问题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-e6e9343e data-v-1b0e1204><div class="VPDoc has-sidebar has-aside" data-v-1b0e1204 data-v-1bc29d7c><!--[--><!--]--><div class="container" data-v-1bc29d7c><div class="aside" data-v-1bc29d7c><div class="aside-curtain" data-v-1bc29d7c></div><div class="aside-container" data-v-1bc29d7c><div class="aside-content" data-v-1bc29d7c><div class="VPDocAside" data-v-1bc29d7c data-v-9a0c0521><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-9a0c0521 data-v-678806e9><div class="content" data-v-678806e9><div class="outline-marker" data-v-678806e9></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-678806e9>导航目录</div><ul class="VPDocOutlineItem root" data-v-678806e9 data-v-4569cf74><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-9a0c0521></div><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid mini"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="http://www.ccflow.org/" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">驰骋流程+表单+低代码</h4><img class="vp-sponsor-grid-image" src="/vue-next-admin-doc-preview/images/ccflowRightNextAdmin.png" alt="驰骋流程+表单+低代码"></article></a></div><!--]--></div></section><!--]--></div></div><!--]--><!--]--><!--]--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-1bc29d7c><div class="content-container" data-v-1bc29d7c><!--[--><!--]--><main class="main" data-v-1bc29d7c><div style="position:relative;" class="vp-doc _vue-next-admin-doc-preview_config_otherIssues_" data-v-1bc29d7c><div><h1 id="其它问题集合" tabindex="-1">其它问题集合 <a class="header-anchor" href="#其它问题集合" aria-label="Permalink to &quot;其它问题集合&quot;">​</a></h1><h2 id="更新-升级-vite-2-0-后遇到的问题" tabindex="-1">更新(升级) vite 2.0 后遇到的问题 <a class="header-anchor" href="#更新-升级-vite-2-0-后遇到的问题" aria-label="Permalink to &quot;更新(升级) vite 2.0 后遇到的问题&quot;">​</a></h2><h3 id="_1-vite-1-x" tabindex="-1">1. vite 1.x <a class="header-anchor" href="#_1-vite-1-x" aria-label="Permalink to &quot;1. vite 1.x&quot;">​</a></h3><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UserConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vite&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { resolve } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;path&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { loadEnv } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./build/utils&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> pathResolve</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dir</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(__dirname, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, dir);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> alias</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &quot;/@/&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pathResolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;src&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PORT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PUBLIC_PATH</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_OPEN</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loadEnv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> root</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> process.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cwd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> viteConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  root,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  alias,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  outDir: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dist&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  minify: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;esbuild&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  port: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PORT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  open: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_OPEN</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  base: process.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">NODE_ENV</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;production&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> VITE_PUBLIC_PATH</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  optimizeDeps: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    include: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;element-plus/lib/locale/lang/zh-cn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> viteConfig;</span></span></code></pre></div><h3 id="_2-vite-2-x" tabindex="-1">2. vite 2.x <a class="header-anchor" href="#_2-vite-2-x" aria-label="Permalink to &quot;2. vite 2.x&quot;">​</a></h3><p>alias、server、build</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p>需要安装 @vitejs/plugin-vue，否则 <code>.vue</code> 文件报错。安装命令：<code>cnpm install @vitejs/plugin-vue --save-dev</code></p></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vue </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@vitejs/plugin-vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UserConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vite&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { loadEnv } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./build/utils&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PORT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PUBLIC_PATH</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_OPEN</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loadEnv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> viteConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  root: process.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cwd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  alias: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      find:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">@</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\/</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      replacement: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/src/&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  base: process.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">NODE_ENV</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;production&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> VITE_PUBLIC_PATH</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  optimizeDeps: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    include: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;element-plus/lib/locale/lang/zh-cn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  server: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    port: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PORT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    open: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_OPEN</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  build: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    outDir: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dist&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minify: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;esbuild&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sourcemap: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> viteConfig;</span></span></code></pre></div><h2 id="页面打开时空白问题" tabindex="-1">页面打开时空白问题 <a class="header-anchor" href="#页面打开时空白问题" aria-label="Permalink to &quot;页面打开时空白问题&quot;">​</a></h2><h3 id="_1-检查浏览器、node-版本-升级浏览器、node-版本-或-重新安装依赖" tabindex="-1">1. 检查浏览器、node 版本：<code>升级浏览器、node 版本</code> 或 <code>重新安装依赖</code> <a class="header-anchor" href="#_1-检查浏览器、node-版本-升级浏览器、node-版本-或-重新安装依赖" aria-label="Permalink to &quot;1. 检查浏览器、node 版本：`升级浏览器、node 版本` 或 `重新安装依赖`&quot;">​</a></h3><h3 id="_2-升级浏览器、node-版本" tabindex="-1">2. 升级浏览器、node 版本 <a class="header-anchor" href="#_2-升级浏览器、node-版本" aria-label="Permalink to &quot;2. 升级浏览器、node 版本&quot;">​</a></h3><p>谷歌浏览器版本 <code>版本 72.0.3626.121</code> 或者 <code>版本 &lt; 72.x</code>，页面将出现报错 <code>Uncaught SyntaxError: Unexpected token.</code> ，这是因为老版本浏览器不支持最新语法 <code>xx?.xx?.xx</code>。</p><p>node 版本需要 <code>大于 12xx.xx.x</code>，<a href="https://nodejs.org/zh-cn/" target="_blank" rel="noreferrer">node 官网</a></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># cmd 输入 node -v</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">node</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -v</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 得到 node 版本号</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">v14.16.0</span></span></code></pre></div><h3 id="_3-重新安装依赖" tabindex="-1">3. 重新安装依赖 <a class="header-anchor" href="#_3-重新安装依赖" aria-label="Permalink to &quot;3. 重新安装依赖&quot;">​</a></h3><p></p><h4 id="先删除项目中的-node-modules" tabindex="-1">先删除项目中的 node_modules <a class="header-anchor" href="#先删除项目中的-node-modules" aria-label="Permalink to &quot;先删除项目中的 node_modules&quot;">​</a></h4><ul><li>建议使用 cnpm，因为 yarn 有时会报错。<a href="https://nodejs.org/zh-cn/" target="_blank" rel="noreferrer">node 版本 &gt; 12xx.xx.x</a></li></ul><h4 id="使用-cnpm-获取-yarn-代替-npm-桌面-cmd-运行" tabindex="-1">使用 cnpm 获取 yarn 代替 npm，（桌面 cmd 运行） <a class="header-anchor" href="#使用-cnpm-获取-yarn-代替-npm-桌面-cmd-运行" aria-label="Permalink to &quot;使用 cnpm 获取 yarn 代替 npm，（桌面 cmd 运行）&quot;">​</a></h4><ul><li>安装 cnpm：<code>npm install -g cnpm --registry=https://registry.npm.taobao.org</code></li><li>安装 yarn：<code>npm install -g yarn</code></li></ul><h4 id="vue-next-admin-项目根目录" tabindex="-1">vue-next-admin 项目根目录 <a class="header-anchor" href="#vue-next-admin-项目根目录" aria-label="Permalink to &quot;vue-next-admin 项目根目录&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 使用 cnpm install 或 cnpm i 安装依赖</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或者使用 yarn install 安装依赖</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span></code></pre></div><h2 id="本地调试接口跨域问题" tabindex="-1">本地调试接口跨域问题 <a class="header-anchor" href="#本地调试接口跨域问题" aria-label="Permalink to &quot;本地调试接口跨域问题&quot;">​</a></h2><p>No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource.</p><p>  Access to image at <code>&#39;https://image.zhangxinxu:9000/#/study/image/blog/201310/2013-10-10203238.png&#39;</code> from origin <code>&#39;http://localhost:8888&#39;</code> has been blocked by CORS policy: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource.</p><p>  &quot;No <code>&#39;Access-Control-Allow-Origin&#39;</code> header is present on the requested resource. Origin <code>&#39;http://localhost:8888&#39;</code> is therefore not allowed access.&quot;，翻译下，因为被请求的资源没有设置 &#39;Access-Control-Allow-Origin&#39;，所以从 <code>&#39;http://localhost:8888&#39;</code> 发起的请求不被允许。</p><p>解决：</p><ul><li>查看文章：<a href="https://blog.csdn.net/qq_34450741/article/details/107444815" target="_blank" rel="noreferrer">vue cli 4.0+ 解决前端跨域问题</a></li><li>基础章节：<a href="/vue-next-admin-doc-preview/config/server/#跨域处理">服务端交互</a></li></ul><h2 id="安装的依赖与-package-json-中的不一致" tabindex="-1">安装的依赖与 package.json 中的不一致 <a class="header-anchor" href="#安装的依赖与-package-json-中的不一致" aria-label="Permalink to &quot;安装的依赖与 package.json 中的不一致&quot;">​</a></h2><h3 id="_1-依赖说明" tabindex="-1">1. 依赖说明 <a class="header-anchor" href="#_1-依赖说明" aria-label="Permalink to &quot;1. 依赖说明&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><p>&#39;~&#39;（波浪符号）:他会更新到当前 minor version（也就是中间的那位数字）中最新的版本。放到我们的例子中就是：&quot;element-plus&quot;: &quot;~1.2.0-beta.4&quot;，这个库会去匹配更新到 1.2.x 的最新版本，如果出了一个新的版本为 1.3.0，则不会自动升级。波浪符号是曾经 npm 安装时候的默认符号，现在已经变为了插入符号。</p></li><li><p>&#39;^&#39;（插入符号）: 这个符号就显得非常的灵活了，他将会把当前库的版本更新到当前 major version（也就是第一位数字）中最新的版本。放到我们的例子中就是：&quot;element-plus&quot;: &quot;^1.2.0-beta.4&quot;, 这个库会去匹配 1.x.x 中最新的版本，但是他不会自动更新到 2.0.0。</p></li></ul></div><h3 id="_2-去掉-锁版本" tabindex="-1">2. 去掉 <code>^</code>，锁版本 <a class="header-anchor" href="#_2-去掉-锁版本" aria-label="Permalink to &quot;2. 去掉 `^`，锁版本&quot;">​</a></h3><p>打开根目录 <code>package.json</code>，去掉 <code>^</code>，如下：</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 默认</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dependencies&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;element-plus&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;^1.2.0-beta.4&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 去掉后</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dependencies&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;element-plus&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1.2.0-beta.4&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="cnpm-run-dev-无法运行项目" tabindex="-1">cnpm run dev 无法运行项目 <a class="header-anchor" href="#cnpm-run-dev-无法运行项目" aria-label="Permalink to &quot;cnpm run dev 无法运行项目&quot;">​</a></h2><h3 id="_1-错误消息-以-vitepress-为例" tabindex="-1">1. 错误消息，以 vitepress 为例 <a class="header-anchor" href="#_1-错误消息-以-vitepress-为例" aria-label="Permalink to &quot;1. 错误消息，以 vitepress 为例&quot;">​</a></h3><p>此错误为 <code>node 版本过低</code>，因为使用的是 <code>v13.6.0</code> 的 node 版本</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">failed</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> to</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> start</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> server.</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> error:</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Package</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> exports</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> for</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;C:\Users\issuser\Desktop\vue-next-admin-doc\node_modules\_vitepress@0.20.2@vitepress\node_modules\vue&#39;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> do</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> not</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> define</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> a</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./dist/vue.runtime.esm-bundler.js&#39;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> subpath</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> applyExports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (internal/modules/cjs/loader.js:531:13)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> resolveExports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (internal/modules/cjs/loader.js:551:12)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Function.Module._findPath</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (internal/modules/cjs/loader.js:657:22)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Function.Module._resolveFilename</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (internal/modules/cjs/loader.js:960:27)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Function.resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (internal/modules/cjs/helpers.js:78:19)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> resolveAliases</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (C:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\U</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sers</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ssuser</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\D</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">esktop</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\v</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ue-next-admin-doc</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ode_modules</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\_</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">vitepress@0.20.2@vitepress</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ist</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ode</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">erve-c378302d.js:12331:28)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> resolveConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (C:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\U</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sers</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ssuser</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\D</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">esktop</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\v</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ue-next-admin-doc</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ode_modules</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\_</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">vitepress@0.20.2@vitepress</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ist</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ode</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">erve-c378302d.js:13372:12)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> processTicksAndRejections</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (internal/process/task_queues.js:97:5)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> async</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Object.createServer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (C:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\U</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sers</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ssuser</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\D</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">esktop</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\v</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ue-next-admin-doc</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ode_modules</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\_</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">vitepress@0.20.2@vitepress</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ist</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ode</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">erve-c378302d.js:36631:18) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  code:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;MODULE_NOT_FOUND&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> code</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ELIFECYCLE</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> errno</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vue-next-admin-doc@1.0.0</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev docs </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">--port</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 9000</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Exit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> status</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Failed</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> at</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> the</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vue-next-admin-doc@1.0.0</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> script.</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> This</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> is</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> probably</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> not</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> a</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> problem</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> with</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm.</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> There</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> is</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> likely</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> additional</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> logging</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> output</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> above.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> A</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> complete</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> log</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> of</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> this</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> can</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> be</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> found</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> in:</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ERR!</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">     C:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\U</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">sers</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">ssuser</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\A</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">ppData</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\R</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">oaming</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\n</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">pm-cache</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\_</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">logs</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">021-12-07T02_06_33_435Z-debug.log</span></span></code></pre></div><h3 id="_2-查看-node-版本-进行版本升级" tabindex="-1">2. 查看 node 版本，进行版本升级 <a class="header-anchor" href="#_2-查看-node-版本-进行版本升级" aria-label="Permalink to &quot;2. 查看 node 版本，进行版本升级&quot;">​</a></h3><p>node 各版本下载地址：<a href="https://npmmirror.com/mirrors/node/" target="_blank" rel="noreferrer">https://npmmirror.com/mirrors/node/</a>。<code>.msi</code> 后缀的为有安装界面应用。</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># win + r，cmd 中输入</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">λ</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> node</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -v</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 输出 v16.13.0</span></span></code></pre></div><h2 id="批量更新-package-json" tabindex="-1">批量更新 package.json <a class="header-anchor" href="#批量更新-package-json" aria-label="Permalink to &quot;批量更新 package.json&quot;">​</a></h2><p>当新建一个项目的时候，有时候会从其他项目的 <code>package.json</code> 里面 copy 一份 <code>dependencies</code> 过来，或者在 <code>github</code> 上下载项目作为改动时，但因为是新项目，我们想用各个依赖包的最新版本。如果手动去修改 <code>dependencies</code> 中各个包的版本号，那就太麻烦了，借助 <code>npm-check-updates</code> 工具可以很方便的将 <code>package.json</code> 中的依赖包版本号更新为最新版本。</p><h3 id="_1-npm-check-updates-安装" tabindex="-1">1. npm-check-updates 安装 <a class="header-anchor" href="#_1-npm-check-updates-安装" aria-label="Permalink to &quot;1. npm-check-updates 安装&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">提示</p><p>以下命令都是在 cmd 中执行：</p></div><p><code>ncu -u</code> 跟新失败，就使用 <code>npm-check-updates</code> 命令</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 1、安装</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm-check-updates</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 2、检查 package.json 中是否有更新</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ncu</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 3、更新依赖到最新版本 or 更新全部 ncu -a</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ncu</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -u</span></span></code></pre></div><h3 id="_2-更新全部依赖" tabindex="-1">2. 更新全部依赖 <a class="header-anchor" href="#_2-更新全部依赖" aria-label="Permalink to &quot;2. 更新全部依赖&quot;">​</a></h3><p>dependencies 到最新版本(包括当前指定版本范围满足最新版本号的,比如^4.2.0 -&gt; ^4.3.0)</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 更新全部 dependencies 到最新版本</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ncu</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -a</span></span></code></pre></div><h2 id="dependencies-和-devdependencies" tabindex="-1">dependencies 和 devDependencies <a class="header-anchor" href="#dependencies-和-devdependencies" aria-label="Permalink to &quot;dependencies 和 devDependencies&quot;">​</a></h2><p>根目录 <code>package.json</code> 中：</p><h3 id="_1-npm-安装依赖-dependencies-和-devdependencies-的区别" tabindex="-1">1. npm 安装依赖 <code>dependencies</code> 和 <code>devDependencies</code> 的区别 <a class="header-anchor" href="#_1-npm-安装依赖-dependencies-和-devdependencies-的区别" aria-label="Permalink to &quot;1. npm 安装依赖 `dependencies` 和 `devDependencies` 的区别&quot;">​</a></h3><ul><li><code>dependencies</code>：是需要发布到生产环境的</li><li><code>devDependencies</code>：里面的插件只用于开发环境，不用于生产环境</li></ul><h3 id="_2-npm-安装方式" tabindex="-1">2. npm 安装方式 <a class="header-anchor" href="#_2-npm-安装方式" aria-label="Permalink to &quot;2. npm 安装方式&quot;">​</a></h3><ul><li><code>dependencies</code>：npm install 依赖名称 --save</li><li><code>devDependencies</code>：npm install 依赖名称 --save-dev</li></ul><h3 id="_3-其它说明" tabindex="-1">3. 其它说明 <a class="header-anchor" href="#_3-其它说明" aria-label="Permalink to &quot;3. 其它说明&quot;">​</a></h3><ul><li><code>dependencies</code>：插件不管你引不引入都会打包到文件中去</li><li><code>devDependencies</code>：若文件中 import 引入 devDependencies 中插件，依然会把当前引入的插件打包到文件中，不引入则不打包</li></ul><h2 id="项目编译慢" tabindex="-1">项目编译慢 <a class="header-anchor" href="#项目编译慢" aria-label="Permalink to &quot;项目编译慢&quot;">​</a></h2><p><code>cnpm run dev</code> 编译慢，根目录 <code>package.json</code>，尝试删除 <code>--force</code></p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;dev&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vite&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span></code></pre></div><h2 id="哪些文件可以删除" tabindex="-1">哪些文件可以删除 <a class="header-anchor" href="#哪些文件可以删除" aria-label="Permalink to &quot;哪些文件可以删除&quot;">​</a></h2><h3 id="_1-百度统计" tabindex="-1">1. 百度统计 <a class="header-anchor" href="#_1-百度统计" aria-label="Permalink to &quot;1. 百度统计&quot;">​</a></h3><p>根目录 <code>index.html</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text/javascript&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> _hmt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> _hmt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> hm </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;script&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    hm.src </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> s </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByTagName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;script&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    s.parentNode.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">insertBefore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(hm, s);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  })();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-百度地图-key" tabindex="-1">2. 百度地图 key <a class="header-anchor" href="#_2-百度地图-key" aria-label="Permalink to &quot;2. 百度地图 key&quot;">​</a></h3><p>根目录 <code>index.html</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text/javascript&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://api.map.baidu.com/api?v=3.0&amp;ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&amp;s=1&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-演示界面" tabindex="-1">3. 演示界面 <a class="header-anchor" href="#_3-演示界面" aria-label="Permalink to &quot;3. 演示界面&quot;">​</a></h3><p><a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/views/fun" target="_blank" rel="noreferrer">/@/views/fun</a> 与 <a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/views/pages" target="_blank" rel="noreferrer">/@/views/pages</a>，需要删除对应的依赖</p><p><a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout" target="_blank" rel="noreferrer">/src/layout</a>，结构说明请查看：<a href="/vue-next-admin-doc-preview/config/">简介 -&gt; 目录结构图</a></p><h3 id="_4-其它" tabindex="-1">4. 其它 <a class="header-anchor" href="#_4-其它" aria-label="Permalink to &quot;4. 其它&quot;">​</a></h3><p>根据具体情况进行对应的删除修改</p><h2 id="如何跟随-master-升级项目" tabindex="-1">如何跟随 master 升级项目 <a class="header-anchor" href="#如何跟随-master-升级项目" aria-label="Permalink to &quot;如何跟随 master 升级项目&quot;">​</a></h2><h3 id="_1-发行版" tabindex="-1">1. 发行版 <a class="header-anchor" href="#_1-发行版" aria-label="Permalink to &quot;1. 发行版&quot;">​</a></h3><p><a href="https://gitee.com/lyt-top/vue-next-admin/releases" target="_blank" rel="noreferrer">发行版</a>，进行下载覆盖（前提是未修改布局等，否则自己修改的将被覆盖，谨慎操作）。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 下载</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">vue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">next</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">admin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">v1.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.zip</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">下载 Source </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (zip)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">下载 Source </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (tar.gz)</span></span></code></pre></div><h3 id="_2-提交日志" tabindex="-1">2. 提交日志 <a class="header-anchor" href="#_2-提交日志" aria-label="Permalink to &quot;2. 提交日志&quot;">​</a></h3><p><a href="https://gitee.com/lyt-top/vue-next-admin/commits/master" target="_blank" rel="noreferrer">提交日志</a>，进行一个一个对比修改（貌似也没有其它好的办法）。</p><h2 id="illustrations-svg-图标库" tabindex="-1">illustrations svg 图标库 <a class="header-anchor" href="#illustrations-svg-图标库" aria-label="Permalink to &quot;illustrations svg 图标库&quot;">​</a></h2><p><a href="https://undraw.co/illustrations" target="_blank" rel="noreferrer">https://undraw.co/illustrations</a>，Browse to find the images that fit your needs and click to download. Use the on-the-fly color image generation to match your brand identity.</p><h2 id="壁纸库" tabindex="-1">壁纸库 <a class="header-anchor" href="#壁纸库" aria-label="Permalink to &quot;壁纸库&quot;">​</a></h2><p><a href="https://wallhaven.cc/" target="_blank" rel="noreferrer">https://wallhaven.cc/</a>，可下载 4k、8k 壁纸（是否侵权，自行辨别）</p><h2 id="事件总线-mitt" tabindex="-1">事件总线 mitt <a class="header-anchor" href="#事件总线-mitt" aria-label="Permalink to &quot;事件总线 mitt&quot;">​</a></h2><p>相关文档地址：<a href="https://github.com/developit/mitt" target="_blank" rel="noreferrer">mitt</a></p><p>代码地址：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/mitt.ts" target="_blank" rel="noreferrer">/@/utils/mitt</a></p><h3 id="_1-发送-发布" tabindex="-1">1. 发送（发布） <a class="header-anchor" href="#_1-发送-发布" aria-label="Permalink to &quot;1. 发送（发布）&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mittBus </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/@/utils/mitt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 方法名 + 参数</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mittBus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">emit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;layoutMobileResize&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;defaults&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    clientWidth,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-监听-订阅" tabindex="-1">2. 监听（订阅） <a class="header-anchor" href="#_2-监听-订阅" aria-label="Permalink to &quot;2. 监听（订阅）&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mittBus </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/@/utils/mitt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 回调参数</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mittBus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;layoutMobileResize&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">res</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 逻辑处理</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-销毁" tabindex="-1">3. 销毁 <a class="header-anchor" href="#_3-销毁" aria-label="Permalink to &quot;3. 销毁&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { onUnmounted } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mittBus </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/@/utils/mitt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 页面销毁时</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onUnmounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mittBus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;layoutMobileResize&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {});</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_4-其它方式-依赖注入" tabindex="-1">4. 其它方式（依赖注入） <a class="header-anchor" href="#_4-其它方式-依赖注入" aria-label="Permalink to &quot;4. 其它方式（依赖注入）&quot;">​</a></h3><p>新版使用 <code>import mittBus from &quot;/@/utils/mitt&quot;;</code> 替换 <code>getCurrentInstance</code></p><p>相关文档：<a href="https://cn.vuejs.org/guide/components/provide-inject.html" target="_blank" rel="noreferrer">依赖注入</a></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> properties</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mittBus: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mitt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">of</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">entries</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(properties)) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">provide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(key, value);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>使用方法</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// script setup</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  import { inject } from &quot;vue&quot;;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  const mittBus = inject(&quot;mittBus&quot;);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mittBus.emit(xxx);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mittBus.on(xxx);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mittBus.off(xxx);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// script</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  import { inject } from &quot;vue&quot;;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  setup() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    const mittBus </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mittBus&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* mittBus.emit(xxx);</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    mittBus.on(xxx);</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    mittBus.off(xxx); */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="设置可视区高度-100" tabindex="-1">设置可视区高度 100% <a class="header-anchor" href="#设置可视区高度-100" aria-label="Permalink to &quot;设置可视区高度 100%&quot;">​</a></h2><p>注意：</p><ul><li>是需要自适应的界面才加上面的类，不需要的别加。内容超出自适应高度，内容将被隐藏。</li><li>需设置内置类：<code>layout-padding</code>、<code>layout-padding-auto</code>、<code>layout-padding-view</code>。</li><li>样式在 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/theme/app.scss" target="_blank" rel="noreferrer">/src/theme/app.scss</a> 中。</li></ul><h3 id="_1-设置普通-div-高度自适应" tabindex="-1">1. 设置普通 div 高度自适应 <a class="header-anchor" href="#_1-设置普通-div-高度自适应" aria-label="Permalink to &quot;1. 设置普通 div 高度自适应&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;layout-padding&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;layout-padding-auto layout-padding-view&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      &lt;!-- 普通溢出内容隐藏 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;xxx 内容区&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      &lt;!-- 使用 `el-scrollbar` 进行美化滚动条。如：`el-scrollbar`</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      &lt;el-scrllbar&gt; xxx 内容区 &lt;/el-scrllbar&gt; --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-设置表格高度自适应-主要使用-flex-布局-el-table-需设置-flex-1" tabindex="-1">2. 设置表格高度自适应：主要使用 flex 布局，<code>el-table</code> 需设置 <code>flex: 1;</code> <a class="header-anchor" href="#_2-设置表格高度自适应-主要使用-flex-布局-el-table-需设置-flex-1" aria-label="Permalink to &quot;2. 设置表格高度自适应：主要使用 flex 布局，`el-table` 需设置 `flex: 1;`&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;system-role-container layout-padding&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;system-role-padding layout-padding-auto layout-padding-view&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;搜索区&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 100%&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;表格内容区&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;分页区&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;其它内容&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 设置样式（必须，可查看演示 系统设置 -&gt; 角色管理） --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scss&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .system-role-container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">system-role-padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="master-分支装依赖时会出现的问题" tabindex="-1">master 分支装依赖时会出现的问题 <a class="header-anchor" href="#master-分支装依赖时会出现的问题" aria-label="Permalink to &quot;master 分支装依赖时会出现的问题&quot;">​</a></h2><h3 id="_1-screenful-要求的-node-版本大于-14-x-1" tabindex="-1">1. screenFul 要求的 node 版本大于 14.x.1 <a class="header-anchor" href="#_1-screenful-要求的-node-版本大于-14-x-1" aria-label="Permalink to &quot;1. screenFul 要求的 node 版本大于 14.x.1&quot;">​</a></h3><p>解决方法：<a href="https://npmmirror.com/mirrors/node/" target="_blank" rel="noreferrer">升级 node 版本</a>。<code>.msi</code> 后缀的为有安装界面应用。</p><h3 id="_2-开发依赖的-types-库-已有自己的类型声明" tabindex="-1">2. 开发依赖的 types 库，已有自己的类型声明 <a class="header-anchor" href="#_2-开发依赖的-types-库-已有自己的类型声明" aria-label="Permalink to &quot;2. 开发依赖的 types 库，已有自己的类型声明&quot;">​</a></h3><p>解决方法：根目录 <code>package.json</code> 下：&quot;@types/axios&quot;: &quot;^0.14.0&quot;，&quot; @types/clipboard&quot;: &quot;^2.0.1&quot;, 去掉这两个依赖</p><h3 id="_3-会报-error-unexpected-end-of-json-input-while-parsing-near-n4m5kye3ueixfv0heavbz-这种类型的错误" tabindex="-1">3. 会报 error Unexpected end of JSON input while parsing near &#39;...n4m5KyE3UEIxfv0HEAVbz&#39; 这种类型的错误 <a class="header-anchor" href="#_3-会报-error-unexpected-end-of-json-input-while-parsing-near-n4m5kye3ueixfv0heavbz-这种类型的错误" aria-label="Permalink to &quot;3. 会报 error Unexpected end of JSON input while parsing near &#39;...n4m5KyE3UEIxfv0HEAVbz&#39; 这种类型的错误&quot;">​</a></h3><p>解决方法：<code>cmd</code> 中执行以下命令</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> cache</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> clean</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --force</span></span></code></pre></div><h2 id="本地开发-页面空白问题" tabindex="-1">本地开发，页面空白问题 <a class="header-anchor" href="#本地开发-页面空白问题" aria-label="Permalink to &quot;本地开发，页面空白问题&quot;">​</a></h2><p>解决方法：删除 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/routerView/parent.vue" target="_blank" rel="noreferrer">layout/routerView/parent.vue</a> <code>keep-alive</code>。如下：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">router-view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ Component }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">transition</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;setTransitionName&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;out-in&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">keep-alive</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :include</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getKeepAliveNames&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :is</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Component&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;refreshRouterViewKey&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">keep-alive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">router-view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>改成（你将失去路由缓存功能，发布时再还原代码，未找到解决办法）</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">router-view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ Component }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">transition</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;setTransitionName&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;out-in&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :is</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Component&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;refreshRouterViewKey&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">router-view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="打包之后缓存问题" tabindex="-1">打包之后缓存问题 <a class="header-anchor" href="#打包之后缓存问题" aria-label="Permalink to &quot;打包之后缓存问题&quot;">​</a></h2><p>根目录 <code>vite.config.ts</code> 中，设置 打包输出 <code>output</code> <code>new Date().getTime()</code></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">build</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  rollupOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    output</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      entryFileNames</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`assets/[name].${</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}.js`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      chunkFileNames</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`assets/[name].${</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}.js`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      assetFileNames</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`assets/[name].${</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}.[ext]`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span></code></pre></div><p><code>&quot;version&quot;: &quot;2.3.0&quot;</code> 版本已改回原来的。<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I5PATZ" target="_blank" rel="noreferrer">build 时 不能用 ${new Date().getTime()} 设置输出文件名</a></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">build</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  rollupOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    output</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      entryFileNames</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`assets/[name].[hash].js`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      chunkFileNames</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`assets/[name].[hash].js`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      assetFileNames</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`assets/[name].[hash].[ext]`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span></code></pre></div><h2 id="地址栏带-号-与不带-号" tabindex="-1">地址栏带 <code>#号</code> 与不带 <code>#号</code> <a class="header-anchor" href="#地址栏带-号-与不带-号" aria-label="Permalink to &quot;地址栏带 `#号` 与不带 `#号`&quot;">​</a></h2><p>地址栏带 <code>#号</code> 与不带 <code>#号</code> ，参考：<a href="https://next.router.vuejs.org/guide/essentials/history-mode.html" target="_blank" rel="noreferrer">next.router history-mode.html</a></p><p>访问路由器和内部的当前路由 setup：<a href="https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup" target="_blank" rel="noreferrer">Vue 路由器和 Composition API</a></p></div></div></main><footer class="VPDocFooter" data-v-1bc29d7c data-v-7922fe7a><!--[--><!--]--><div class="edit-info" data-v-7922fe7a><div class="edit-link" data-v-7922fe7a><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/config/otherIssues/index.md" target="_blank" rel="noreferrer" data-v-7922fe7a><!--[--><span class="vpi-square-pen edit-link-icon" data-v-7922fe7a></span> 欢迎到 Gitee 上编辑此页<!--]--></a></div><div class="last-updated" data-v-7922fe7a><p class="VPLastUpdated" data-v-7922fe7a data-v-f919ac01>上次更新: <time datetime="2023-03-02T04:03:37.000Z" data-v-f919ac01></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-7922fe7a><span class="visually-hidden" id="doc-footer-aria-label" data-v-7922fe7a>Pager</span><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link prev" href="/vue-next-admin-doc-preview/config/builtPlug/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>上一页</span><span class="title" data-v-7922fe7a>内置插件的使用</span><!--]--></a></div><div class="pager" data-v-7922fe7a><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-e6e9343e data-v-d3e003fa><div class="container" data-v-d3e003fa><p class="message" data-v-d3e003fa>根据 MIT 许可证发布</p><p class="copyright" data-v-d3e003fa>本文档内容版权为 vue-next-admin 作者所有，保留所有权利。</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"config_build_index.md\":\"D66wEP1j\",\"config_builtplug_index.md\":\"D2vmqGsI\",\"config_charts_index.md\":\"AKJZmCTu\",\"config_directive_index.md\":\"BknO8zbE\",\"config_i18n_index.md\":\"CEUZIFAO\",\"config_iconfont_index.md\":\"CwSwNiIL\",\"config_index.md\":\"BWWh4uPI\",\"config_layoutconfig_index.md\":\"y3w-TjAE\",\"config_menu_index.md\":\"3wChSrOV\",\"config_otherissues_index.md\":\"BOPxKpRj\",\"config_partyplug_index.md\":\"C8yqZf2d\",\"config_power_index.md\":\"Ck6Qtvrt\",\"config_route_index.md\":\"Bh5Jr5_u\",\"config_server_index.md\":\"BlrltGMx\",\"config_tagsview_index.md\":\"T-3O6iEI\",\"config_tool_index.md\":\"BD422M9a\",\"config_vuex_index.md\":\"BlaPjLAQ\",\"home_compatible_index.md\":\"3OXuA7v8\",\"home_doc_index.md\":\"C45XHwz0\",\"home_eslint_index.md\":\"DaE-VgkK\",\"home_fast_index.md\":\"Cvjlg4iK\",\"home_forpeople_index.md\":\"FmtZKjE-\",\"home_gitpush_index.md\":\"4PZJWbVF\",\"home_index.md\":\"5dmU-wlV\",\"home_install_index.md\":\"B0F5JJzW\",\"home_introduce_index.md\":\"CXcs-Z1z\",\"home_prettier_index.md\":\"Cv6odTsh\",\"home_thank_index.md\":\"B-DzVr5x\",\"home_vscode_index.md\":\"Bowdae-M\",\"index.md\":\"B79oanHt\",\"shop_index.md\":\"PQuQh6BV\",\"support_index.md\":\"C3lVrH0L\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"vue-next-admin\",\"description\":\"🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档\",\"base\":\"/vue-next-admin-doc-preview/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/images/logo-mini.svg\",\"search\":{\"provider\":\"local\"},\"outlineTitle\":\"导航目录\",\"outline\":\"deep\",\"lastUpdatedText\":\"上次更新\",\"editLink\":{\"pattern\":\"https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/:path\",\"text\":\"欢迎到 Gitee 上编辑此页\"},\"author\":\"lyt_20201208\",\"footer\":{\"message\":\"根据 MIT 许可证发布\",\"copyright\":\"本文档内容版权为 vue-next-admin 作者所有，保留所有权利。\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"指南\",\"link\":\"/home/\",\"activeMatch\":\"/home/\"},{\"text\":\"配置\",\"link\":\"/config/\",\"activeMatch\":\"/config/\"},{\"text\":\"集成后端\",\"items\":[{\"text\":\"@zuohuaijun Admin.NET\",\"link\":\"https://gitee.com/zuohuaijun/Admin.NET\"},{\"text\":\"@熊猫 PandaGoAdmin\",\"link\":\"https://github.com/PandaGoAdmin/PandaX\"},{\"text\":\"@甜蜜蜜 GoPro平台\",\"link\":\"https://toscode.gitee.com/GionConnection/gopro_free\"},{\"text\":\"@甜蜜蜜 NiuPi 平台\",\"link\":\"https://gitee.com/GionConnection/niupi-free\"},{\"text\":\"@游子 GFast-V3\",\"link\":\"https://gitee.com/tiger1103/gfast/tree/os-v3/\"},{\"text\":\"@diygw.com gw-ui-php\",\"link\":\"https://gitee.com/diygw/diygw-ui-php/\"},{\"text\":\"@zsvg vboot-net\",\"link\":\"https://gitee.com/zsvg/vboot-net\"},{\"text\":\"@zsvg vboot-java\",\"link\":\"https://gitee.com/zsvg/vboot-java\"},{\"text\":\"@青红造了个白 buildadmin\",\"link\":\"https://gitee.com/wonderful-code/buildadmin\"},{\"text\":\"@Goodwell iotfast(一个开源的物联网平台)\",\"link\":\"https://github.com/xiaodingding/iotfast\"}]},{\"text\":\"演示 & 仓库\",\"items\":[{\"text\":\"⛱️ 线上演示\",\"items\":[{\"text\":\"vue3.x 版本预览（vue-next-admin）\",\"link\":\"http://vuenextadmin.ccfast.cc/\"},{\"text\":\"vue2.x 版本预览（vue-prev-admin）\",\"link\":\"https://lyt-top.gitee.io/vue-prev-admin-preview/#/login\"},{\"text\":\"vue3 + uni-app 商城（vue-next-admin-shop）\",\"link\":\"https://lyt-top.gitee.io/vue-next-admin-shop-preview\"}]},{\"text\":\"💒 代码仓库\",\"items\":[{\"text\":\"gitee（国内：实时更新）\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin\"},{\"text\":\"github（国外：定期更新）\",\"link\":\"https://github.com/lyt-Top/vue-next-admin\"}]}]},{\"text\":\"日志 & 文档\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md\"},{\"text\":\"文档仓库\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin-doc\"}]},{\"text\":\"赞助\",\"link\":\"/support/\",\"activeMatch\":\"/support/\"},{\"text\":\"商城\",\"link\":\"/shop/\",\"activeMatch\":\"/shop/\"}],\"sidebar\":{\"/home/\":[{\"text\":\"入门须知\",\"collapsed\":false,\"items\":[{\"text\":\"许可\",\"link\":\"/home/\"},{\"text\":\"兼容性\",\"link\":\"/home/compatible/\"},{\"text\":\"适用人群\",\"link\":\"/home/forPeople/\"},{\"text\":\"学习文档\",\"link\":\"/home/doc/\"},{\"text\":\"特别鸣谢\",\"link\":\"/home/thank/\"}]},{\"text\":\"开发指南\",\"collapsed\":false,\"items\":[{\"text\":\"介绍\",\"link\":\"/home/introduce/\"},{\"text\":\"安装\",\"link\":\"/home/install/\"},{\"text\":\"其它\",\"link\":\"/home/fast/\"}]},{\"text\":\"代码规范\",\"collapsed\":false,\"items\":[{\"text\":\"eslint\",\"link\":\"/home/eslint/\"},{\"text\":\"prettier\",\"link\":\"/home/prettier/\"},{\"text\":\"vsCode 配置\",\"link\":\"/home/vscode/\"},{\"text\":\"git 提交规范\",\"link\":\"/home/gitPush/\"}]}],\"/config/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"text\":\"简介\",\"link\":\"/config/\"},{\"text\":\"菜单配置\",\"link\":\"/config/menu/\"},{\"text\":\"布局配置\",\"link\":\"/config/layoutConfig/\"},{\"text\":\"字体图标\",\"link\":\"/config/iconfont/\"},{\"text\":\"服务端交互\",\"link\":\"/config/server/\"},{\"text\":\"vuex\",\"link\":\"/config/vuex/\"},{\"text\":\"打包预览\",\"link\":\"/config/build/\"}]},{\"text\":\"高级\",\"collapsed\":false,\"items\":[{\"text\":\"权限管理\",\"link\":\"/config/power/\"},{\"text\":\"路由参数\",\"link\":\"/config/route/\"},{\"text\":\"国际化\",\"link\":\"/config/i18n/\"},{\"text\":\"标签页\",\"link\":\"/config/tagsView/\"},{\"text\":\"内置指令\",\"link\":\"/config/directive/\"}]},{\"text\":\"其它\",\"collapsed\":false,\"items\":[{\"text\":\"数据可视化\",\"link\":\"/config/charts/\"},{\"text\":\"工具类集合\",\"link\":\"/config/tool/\"},{\"text\":\"第三方插件使用\",\"link\":\"/config/partyPlug/\"},{\"text\":\"内置插件的使用\",\"link\":\"/config/builtPlug/\"},{\"text\":\"其它问题\",\"link\":\"/config/otherIssues/\"}]}],\"/shop/\":[{\"text\":\"首页\",\"collapsed\":false},{\"text\":\"分类\",\"collapsed\":false},{\"text\":\"服务\",\"collapsed\":false},{\"text\":\"购物车\",\"collapsed\":false},{\"text\":\"我的\",\"collapsed\":false}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>